import React, { useState, useEffect } from 'react';
import { Button, Descriptions, Drawer, Radio, Space, Table, theme } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import './index.less'
import CztApi from '../../../../../../../utils/apis/CztApi';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import FxqyApi from '../../../../../../../utils/apis/FxqyApi';
export default function Lndzsjlb(props) {
    const { dzengDetailItem } = props;
    const map = useBusinessMap
    const [open, setOpen] = useState(true);
    const [data, setData] = useState();
    const [total, setTotal] = useState();
    const [params, setParams] = useState({
        pageSize: 5,
        pageNum: 1
    })
    useEffect(() => {
        FxqyApi.lndzsj_find().then(resp => {
            setData(resp.rows)
            setTotal(resp?.total)
        })
    }, [])


    return <>
        {
            open && dzengDetailItem && (<div className='lndz'>
                <div style={{
                    width: '92%',
                    fontSize: 20,
                    fontWeight: 'bold',
                    borderBottom: '2px solid #eee',
                    paddingTop: 12,
                    paddingBottom: 12,
                    marginLeft: 14,
                    marginBottom: 12
                }} className='layout-h center'>
                    <div className='fill w0'>历年地震数据列表</div>
                    <div>
                        <Button size='small' style={{

                            background: "#00000000"
                        }} icon={<CloseOutlined />} onClick={e => setOpen(false)}
                        />
                    </div>
                </div>

                <div style={{
                    position: 'relative',
                    top: '4%',
                    left: '1%',
                    right: '1%',
                    padding: 12
                }}>
                    <Table columns={[{
                        title: '发震时间',
                        dataIndex: 'fzsj',
                        ellipsis: true
                    },
                    {
                        title: '深度',
                        dataIndex: 'sd',
                        ellipsis: true
                    }, {
                        title: '震级',
                        dataIndex: 'zj',
                        ellipsis: true
                    }]}
                        dataSource={data}
                        bordered
                        onRow={record => {
                            return {
                                onClick: e => {
                                    if (record.shp) {
                                        navByWkt(record.shp, map)
                                    }
                                }
                            }
                        }}
                        pagination={{
                            current: params.pageNum,
                            pageSize: params.pageSize,
                            total,
                            simple: true,
                            onChange: (page) => {
                                setParams(params => {
                                    return {
                                        ...params,
                                        pageNum: page
                                    }
                                })

                            }
                        }}
                    />
                </div>

                {/* <Descriptions column={1}  bordered size="small" className='fill h0' style={{
            width:'100%',
            height:'90%',
            overflow: "auto",
            border:'1px solid #eee',
            background:'rgba(9, 26, 35,.5)'
        }}>
            {/* {
                Object.entries(data).map(([key,value])=>(
                    <Descriptions.Item key={key} label={key}>{value}</Descriptions.Item>
                ))
            } */}
                {/* </Descriptions> */}

            </div>)
        }

    </>
}